<template>
  <van-swipe class="my-swipe" :autoplay="3000">
    <van-swipe-item v-for="item in hotNews" :key="item.id" @click="toDetail(item.id)">
      <img :src="item.pic" :alt="item.title" />
    </van-swipe-item>
    <template #indicator="{ active, total }">
      <div class="custom-indicator">
        <span class="title" v-if="hotNews[active]">{{ hotNews[active].title }}</span>
        <span class="indicator">{{ active + 1 }}/{{ total }} </span>
      </div>
    </template>
  </van-swipe>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { fetchHotNews } from '@/api/index.js'
import { useRouter } from 'vue-router'
const router = useRouter()

const hotNews = ref([])
onMounted(async () => {
  const response = await fetchHotNews()
  hotNews.value = response.data
})

const toDetail = (id) => {
  // 新闻详情页
  router.push({ path: `/detail/${id}` })
}
</script>

<style scoped>
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
  height: 300px;
  width: 100%;
}

.van-swipe-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fills;
}

.custom-indicator {
  position: absolute;
  width: 100%;
  bottom: 5px;
  height: 12px;
  padding: 2px 5px;
  line-height: 12px;
  background: rgba(0, 0, 0, 0.1);
  color: #fff;
}

.custom-indicator .title {
  position: relative;
  font-size: 12px;
  text-overflow: ellipsis;
}

.custom-indicator .indicator {
  float: right;
  margin-right: 10px;
  font-size: 12px;
}
</style>
